<template>
  <div class="mainDialog">
    <el-dialog
      lock-scroll
      custom-class="myDialogClass"
      :width="bigWidhtList[contentOption.type]"
      :title="title"
      :visible.sync="visible"
      :close-on-click-modal="close_on_click_modal"
      :close-on-press-escape="close_on_press_escape"
      :show-close="show_close"
      :destroy-on-close="destroy_on_close"
    >
      <slot name="dialog-content">
        <div v-if="contentOption.type === 'text'">
          {{ contentOption[contentOption.type] }}
        </div>

        <div v-if="contentOption.type === 'form'">
          <ocn-mainForm
            layout="row"
            ref="myTestForm"
            :label_align_left="false"
            :form="contentOption[contentOption.type]"
            :showSelfLine="contentOption[contentOption.type].selfLine.showSelfLine"
            :selfLabel="contentOption[contentOption.type].selfLine.selfLabel"
            @submit="onSubmit"
            @formEventBus="formEventBus"
          >
            <file-selection></file-selection>
          </ocn-mainForm>
        </div>

        <div v-if="contentOption.type === 'transfer'">
          <dialog-transfer
            :titles="contentOption[contentOption.type].title"
            :button_texts="contentOption[contentOption.type].button_texts"
            :transDatas="contentOption[contentOption.type].transDatas"
            :alias="contentOption[contentOption.type].alias"
            :search="contentOption[contentOption.type].search"
            @transferChange="transferChange"
          ></dialog-transfer>
        </div>

        <div v-if="contentOption.type === 'list'"></div>
      </slot>
      <span slot="footer" class="dialog-footer">
        <el-button
          v-for="(btn, index) in btnGroup"
          :key="index"
          :type="btn.btnType"
          @click="eventDistribution(btn.eventType)"
          >{{ btn.text }}</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import dialogTransfer from "./dialogContainer/dialogTransfer.vue";
export default {
  components: { dialogTransfer },
  name: "ocn-myDialog",
  props: {
    title: {
      type: String,
      default: "",
    },
    dialogVisible: {
      type: Boolean,
      default: false,
    },
    close_on_click_modal: {
      type: Boolean,
      default: false,
    },
    close_on_press_escape: {
      type: Boolean,
      default: false,
    },
    show_close: {
      type: Boolean,
      default: true,
    },
    destroy_on_close: {
      type: Boolean,
      default: true,
    },
    contentOption: {
      type: Object,
      default: () => {
        return {
          type: "",
          text: "",
          list: [],
          transfer: {},
          form: {},
        };
      },
    },
    btnGroup: {
      type: Array,
      default: () => {
        return [
          {
            eventType: "cancel",
            btnType: "",
            text: "取消",
          },
          {
            eventType: "confirm",
            btnType: "primary",
            text: "确认",
          },
        ];
      },
    },
  },
  data() {
    return {
      // 大宽度的对话框类型
      bigWidhtList: {
        form: "80%",
        transfer: "60%",
      },

      // 用于转接 .sync标记的prop参数，无法直接赋值更改，以此同步中转 prop--dialogVisible的变化
      visible: false,

      // 已声明定义的函数方法名列表
      funcNames: ["confirm", "cancel", "submit"],

      optionVal: {
        value: undefined,
        valueType: "",
      },
    };
  },
  watch: {
    /**
     * @author QL
     * @functionName dialogVisible
     * @param { Boolean } nv 变更的最新值
     * @param { Boolean } ov 变更前的值
     * @date 2022-01-21 15:03:05
     * @version V..
     * @description 监听prop dialogVisible 的数值变化
     */
    dialogVisible(nv, ov) {
      this.visible = nv;
    },

    /**
     * @author QL
     * @functionName visible
     * @param { Boolean } nv 变更的最新值
     * @param { Boolean } ov 变更前的值
     * @date 2022-01-21 15:03:05
     * @version V..
     * @description 监听 visible 的数值变化
     */
    visible(nv, ov) {
      this.changeVisible(nv);
    },
  },
  created() {},
  mounted() {},
  methods: {
    /**
     * @author QL
     * @functionName eventDistribution
     * @param { String } eventType 按钮方法的函数名称
     * @date 2022-01-21 17:02:04
     * @version V..
     * @description 函数分发器
     */
    eventDistribution(eventType) {
      try {
        if (this.funcNames.indexOf(eventType) != -1) {
          this[eventType]();
        } else {
          throw new Error("未定义的操作方法函数名！");
        }
      } catch (err) {
        //TODO handle the exception
        console.log("操作方法异常：" + "(" + eventType + ")", err);
        this.cancel();
      }
    },

    cancel() {
      this.optionVal = {
        value: undefined,
        valueType: "",
      };

      this.closeDialog();
      console.log("取消 默认方法！");
    },
    confirm() {
      this.$emit("dialogOption", this.optionVal);

      this.closeDialog();
      console.log("确认 默认方法！");
    },
    closeDialog() {
      this.$emit("update:dialogVisible", false);
    },

    /**
     * @author QL
     * @functionName changeVisible
     * @param { Boolean } vl 变更的最新值
     * @date 2022-01-21 15:04:46
     * @version V..
     * @description 中转visible值， sync入参， 跨组件更新 另外一个sync prop属性
     */
    changeVisible(vl) {
      this.$emit("update:dialogVisible", vl);
    },

    /**
     * @author QL
     * @functionName submit
     * @date 2022-01-21 17:01:28
     * @version V..
     * @description 提交表单方法
     */
    submit() {
      console.log("dialog form submit");
      this.$refs.myTestForm.onSubmit();
    },

    onSubmit(val) {
      this.optionVal.value = val;
      this.optionVal.valueType = typeof val;
      this.$emit("dialogOption", this.optionVal);

      this.$refs.myTestForm.resetForm();
      this.closeDialog();
    },

    formEventBus(busMsg) {
      console.log("表单事件总线消息：", busMsg);
    },

    /**
     * @author QL
     * @functionName transferChange
     * @param { Array } transferVal
     * @date 2022-01-24 12:10:25
     * @version V..
     * @description 穿梭框数据变化时触发
     */
    transferChange(transferVal) {
      console.log("transfer value change:", transferVal);
      this.optionVal.value = transferVal;
      this.optionVal.valueType = typeof transferVal;
    },

    emitCollector(val) {
      this.$emit("dialogOption", {
        value: val,
        valueType: typeof val,
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.mainDialog {
}
/deep/ .el-dialog {
  border-radius: 6px !important;
}
</style>
